<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS basics</title>
  <link rel="stylesheet" href="styles/basic.css">
</head>
<body>
  <div class="app">
    <h2>层叠与继承</h2>
    <h3>层叠</h3>
    <section>
      <p class="text-one">This is my text.</p>
    </section>
    <h3>优先级</h3>
    <section>
      <h1 class="heading-one">This is my heading.</h1>
    </section>
    <section>
      <h1>This is my heading.</h1>
    </section>
    <section>
      <h4>Heading with no class</h4>
      <h4 class="small">Heading with class of small</h4>
      <h4 class="bright">Heading with class of bright</h4>
    </section>
    <section>
      <div class="box-one">
        <p class="text-two">
          <span>111</span>
        </p>
      </div>
    </section>
    <h3>优先级</h3>
    <section>
      <p class="p-one">
        We can change the color by targetting the element with a selector, such as this <span>span</span>.
      </p>
    </section>
    <h3>选择器类型</h3>
    <section>
      <h1>类型选择器，直接选中同类元素</h1>
    </section>
    <section>
      <div id="box-two">ID选择器</div>
    </section>
    <section>
      <div class="text-three">类选择器</div>
    </section>
    <section>
      <a title="属性选择器" href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors" target="_blank">属性选择器命中</a>
      <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors" target="_blank">没有属性，属性选择器无法选中</a>
    </section>
    <section>
      <p>
        <button class="btn">伪类选择器，鼠标悬停效果</button>
      </p>
    </section>
    <section>
      <p>
        <a class="link-one" href="#">首页</a>
        <a class="link-one" href="#">列表</a>
        <a class="link-one" href="#">详情</a>
      </p>
    </section>
    <section>
      <div class="box-three">
        <div>
          <div>后代选择器</div>
          <div>所有后代匹配的元素都会被选中</div>
        </div>
        <div>
          <div>后代选择器</div>
          <div>所有后代匹配的元素都会被选中</div>
        </div>
      </div>
    </section>
    <section>
      <div class="box-four">
        <div>
          <div>子元素选择器</div>
          <div>只会匹配直接后代</div>
        </div>
        <div>
          <div>子元素选择器</div>
          <div>只会匹配直接后代</div>
        </div>
      </div>
    </section>
    <h2>盒子模型</h2>
    <section>
      <div class="box-five">这是一个块级元素，会占满一整行</div>
      <div class="box-five">这是一个块级元素，会占满一整行</div>
    </section>
    <section>
      <div class="box-six">
        <span>内联盒子</span>
        <span>内联盒子</span>
        <span>内联盒子</span>
      </div>
    </section>
    <h3>标准盒子模型</h3>
    <section>
      <div class="box-seven">
        这是一个标准盒子模型
      </div>
    </section>
    <h3>替代盒子模型</h3>
    <section>
      <div class="box-seven box-eight">
        这是一个替代盒子模型
      </div>
    </section>
    <h2>背景与边框</h2>
    <h3>背景</h3>
    <section>
      <div class="box-seven bg-one">背景颜色 background-color</div>
      <div class="box-seven bg-two">背景图片 background-image</div>
      <div class="box-seven bg-three">同时设定背景颜色和图片</div>
      <div class="box-seven bg-four">背景图片水平重复</div>
      <div class="box-seven bg-five">背景图片垂直重复</div>
      <div class="box-seven bg-six">背景图片居中对齐</div>
      <div class="box-seven bg-seven">背景渐变色</div>
    </section>
    <h3>边框</h3>
    <section>
      <div class="box-seven border-one">实线边框</div>
      <div class="box-seven border-two">虚线边框</div>
      <div class="box-seven border-three">点线边框</div>
      <div class="box-seven border-four">设置不同的边框颜色</div>
    </section>
    <h3>圆角</h3>
    <section>
      <div class="box-seven radius-one">四角圆角</div>
      <div class="box-seven radius-two">两角圆角</div>
      <div class="box-seven radius-three">两角圆角</div>
      <div class="box-seven radius-four">圆形</div>
    </section>
    <h3>阴影</h3>
    <section class="shadow-wrap">
      <div class="shadow-box shadow-one">外阴影</div>
      <div class="shadow-box shadow-two">内阴影</div>
      <div class="shadow-box shadow-three">阴影偏移</div>
    </section>
    <h2>溢出的内容</h2>
    <section>
      <div>内容溢出</div>
      <div class="box-seven overflow-one">
        我们知道，CSS中万物皆盒，因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写CSS的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到CSS布局的时候。
      </div>
    </section>
    <section>
      <div>容器自动出现滚动条</div>
      <div class="box-seven overflow-two">
        我们知道，CSS中万物皆盒，因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写CSS的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到CSS布局的时候。
      </div>
    </section>
    <section>
      <div>溢出内容被隐藏</div>
      <div class="box-seven overflow-three">
        我们知道，CSS中万物皆盒，因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写CSS的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到CSS布局的时候。
      </div>
    </section>
    <h2>CSS的值和单位</h2>
    <section>
      <div class="unit-wrap">
        <p class="unit-one">px：像素</p>
        <p class="unit-two">em：父元素字体大小</p>
        <p class="unit-three">rem：html根元素字体大小</p>
        <p class="unit-four">百分比字体大小</p>
        <div class="box-seven box-eight unit-five">百分比尺寸，父元素的50%宽度</div>
        <p class="unit-six">颜色关键词, red</p>
        <p class="unit-seven">十六进制RGB值，#ff0000</p>
        <p class="unit-eight">RGB函数，rgb(255, 0, 0)</p>
        <p class="unit-nine">RGBA函数，带有透明通道，rgba(255, 0, 0, 0.6)</p>
      </div>
    </section>
    <h2>文字排版</h2>
    <section>
      <p class="text-four">
        元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (<span class="text-five">或者是右上角，是在 RTL 语言的情况下</span>)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，<span class="text-six">你可以使用元素 &lt;br&gt;</span>。
      </p>
    </section>
    <section>
      <p class="text-four text-seven">
        元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (<span class="text-five">或者是右上角，是在 RTL 语言的情况下</span>)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，<span class="text-six">你可以使用元素 &lt;br&gt;</span>。
      </p>
    </section>
    <section>
      <p>
        <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text">这是默认的链接样式</a>
      </p>
      <p>
        <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text" class="link-two">这是经过修改的链接样式</a>
      </p>
    </section>
    <h2>CSS变换</h2>
    <h3>translate：移动</h3>
    <section>
      <div>默认位置</div>
      <img src="imgs/googlelogo.png">
    </section>
    <section>
      <div>x移动200px，y移动20px</div>
      <img src="imgs/googlelogo.png" class="trans-one">
    </section>
    <h3>scale：缩放</h3>
    <section>
      <div>缩放1.3倍</div>
      <img src="imgs/googlelogo.png" class="trans-two">
    </section>
    <h3>rotate：旋转</h3>
    <section>
      <div>旋转45度</div>
      <img src="imgs/googlelogo.png" class="trans-three">
    </section>
    <h2>CSS过渡</h2>
    <section>
      <div>鼠标悬停出现过渡效果</div>
      <img src="imgs/googlelogo.png" class="trans-four">
    </section>
    <section>
      <div>鼠标悬停出现过渡效果</div>
      <img src="imgs/googlelogo.png" class="trans-five">
    </section>
    <h2>CSS动画</h2>
    <section class="animate-wrap">
      <img src="imgs/googlelogo.png" class="animate-one">
    </section>
    <section class="animate-wrap">
      <img src="imgs/googlelogo.png" class="animate-two">
    </section>
    <section>
      <img src="imgs/loading.png" class="animate-three">
    </section>
    <h2>定位</h2>
    <h3>文档流</h3>
    <section class="pos-wrap">
      <h1>正常文档流</h1>

      <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

      <p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>

      <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

      <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do:
      </p>
    </section>
    <section class="pos-wrap">
      <h1>元素定位</h1>

      <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

      <p class="pos-rel">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>

      <p class="pos-abs">We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

      <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do:
      </p>
    </section>
    <h2>Flex弹性盒子布局</h2>
    <h3>排列方向</h3>
    <section class="flex-one">
      <div class="flex-item">水平排列</div>
      <div class="flex-item">水平排列</div>
      <div class="flex-item">水平排列</div>
    </section>
    <section class="flex-two">
      <div class="flex-item">竖向排列</div>
      <div class="flex-item">竖向排列</div>
      <div class="flex-item">竖向排列</div>
    </section>
    <section class="flex-three">
      <div class="flex-item">换行</div>
      <div class="flex-item">换行</div>
      <div class="flex-item">换行</div>
      <div class="flex-item">换行</div>
      <div class="flex-item">换行</div>
      <div class="flex-item">换行</div>
      <div class="flex-item">换行</div>
    </section>
    <section class="flex-one">
      <div class="flex-item flex-fixed">固定尺寸</div>
      <div class="flex-item flex-auto">动态尺寸</div>
      <div class="flex-item flex-auto">动态尺寸</div>
    </section>
    <h3>水平和垂直对齐</h3>
    <section class="flex-four">
      <div class="flex-item">默认铺满交叉轴</div>
      <div class="flex-item">默认铺满交叉轴</div>
      <div class="flex-item">默认铺满交叉轴</div>
    </section>
    <section class="flex-five">
      <div class="flex-item">交叉轴居中对齐</div>
      <div class="flex-item">
        交叉轴居中对齐</br>
        交叉轴居中对齐</br>
        交叉轴居中对齐</br>
        交叉轴居中对齐</br>
      </div>
      <div class="flex-item">交叉轴居中对齐</div>
    </section>
    <section class="flex-six">
      <div class="flex-item">交叉轴开始处对齐</div>
      <div class="flex-item">
        交叉轴开始处对齐</br>
        交叉轴开始处对齐</br>
        交叉轴开始处对齐</br>
        交叉轴开始处对齐</br>
      </div>
      <div class="flex-item">交叉轴开始处对齐</div>
    </section>
    <section class="flex-seven">
      <div class="flex-item">交叉轴结束处对齐</div>
      <div class="flex-item">
        交叉轴结束处对齐</br>
        交叉轴结束处对齐</br>
        交叉轴结束处对齐</br>
        交叉轴结束处对齐</br>
      </div>
      <div class="flex-item">交叉轴结束处对齐</div>
    </section>
    <section class="flex-eight">
      <div class="flex-item">主轴居中对齐</div>
      <div class="flex-item">
        主轴居中对齐</br>
        主轴居中对齐</br>
        主轴居中对齐</br>
        主轴居中对齐</br>
      </div>
      <div class="flex-item">主轴居中对齐</div>
    </section>
    <section class="flex-nine">
      <div class="flex-item">主轴均匀排布，两侧无空间</div>
      <div class="flex-item">
        主轴均匀排布，两侧无空间</br>
        主轴均匀排布，两侧无空间</br>
        主轴均匀排布，两侧无空间</br>
        主轴均匀排布，两侧无空间</br>
      </div>
      <div class="flex-item">主轴均匀排布，两侧无空间</div>
      <div class="flex-item">主轴均匀排布，两侧无空间</div>
    </section>
    <section class="flex-ten">
      <div class="flex-item">主轴均匀排布，两侧有空间</div>
      <div class="flex-item">
        主轴均匀排布，两侧有空间</br>
        主轴均匀排布，两侧有空间</br>
        主轴均匀排布，两侧有空间</br>
        主轴均匀排布，两侧有空间</br>
      </div>
      <div class="flex-item">主轴均匀排布，两侧无空间</div>
      <div class="flex-item">主轴均匀排布，两侧有空间</div>
    </section>
    <h2>Grid网格布局</h2>
    <section class="grid-one">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </section>
    <section class="grid-two">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </section>
    <section class="grid-three">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </section>
    <section class="grid-four">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </section>
  </div>
</body>
</html>